<div id="outter" style="width:300px; height:300px; background-color:lightblue">
	<div id="inner" style="margin:100px; width:100px; height:100px; background-color:lightgreen">
		Text
	</div>
</div>
<div id="console"></div>

<script>
var o = document.getElementById("outter");
var i = document.getElementById("inner");
var c = document.getElementById("console");
var currentElement;

o.onmouseover = o_in;



function o_in()
{
	pe("-> " + event.srcElement.id + " --", "blue");
	o.onmouseover = null;
	o.onmouseout = o_out;
}

function i_move()
{
	c.innerHTML += "<span style='background-color:green;color:white'>.</span>";
}

function o_out()
{
	pe("-- " + event.srcElement.id + " ->", "blue");
	o.onmouseover = o_in;
	o.onmouseout = null;
}

function pe(txt, color)
{
	c.innerHTML += "<li style='color:" + color + "'>" + txt + "</li>";
}

</script>
	